<template>
  <div class="tools-container">
    <!-- 背景装饰元素 -->
    <div class="decorate-circle-1"></div>
    <div class="decorate-circle-2"></div>
    <div class="decorate-line-1"></div>
    
    <!-- 标题区 -->
    <div class="dashboard-header">
      <h1 class="dashboard-title">
        <span class="title-icon">🚀</span>
        矿大知识平台 · 数据驾驶舱
        <span class="title-icon">🌌</span>
      </h1>
      <div class="time-display">{{ currentTime }}</div>
    </div>
    
    <!-- 数据概览卡片 -->
    <div class="data-overview">
      <div class="data-card" v-for="(item, index) in overviewData" :key="index">
        <div class="data-card-icon" :style="{background: item.bgColor}">
          <span>{{ item.icon }}</span>
        </div>
        <div class="data-card-content">
          <div class="data-card-title">{{ item.title }}</div>
          <div class="data-card-value">{{ item.value }}</div>
          <div class="data-card-trend" :class="item.trend > 0 ? 'up' : 'down'">
            {{ item.trend > 0 ? '↑' : '↓' }} {{ Math.abs(item.trend) }}%
          </div>
        </div>
        <div class="data-card-decoration"></div>
      </div>
    </div>

    <!-- 用户行为分析分区 -->
    <div class="section-card">
      <div class="section-header">
        <h2 class="section-title">
          <span class="title-icon">📊</span>
          用户行为分析
        </h2>
        <div class="section-decoration"></div>
      </div>
      <div class="chart-container">
        <div ref="usageTrendChart" class="chart-item"></div>
        <div ref="preferenceChart" class="chart-item"></div>
        <div ref="wordCloudChart" class="chart-item"></div>
        <div ref="heatMapChart" class="chart-item"></div>
      </div>
    </div>

    <!-- 系统性能分析分区 -->
    <div class="section-card">
      <div class="section-header">
        <h2 class="section-title">
          <span class="title-icon">⚙️</span>
          系统性能分析
        </h2>
        <div class="section-decoration"></div>
      </div>
      <div class="chart-container">
        <div ref="responseTimeChart" class="chart-item"></div>
        <div ref="errorRateChart" class="chart-item"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { CloseBold } from "@element-plus/icons-vue";
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import 'echarts-wordcloud';

export default {
  name: "dataview",
  data() {
    return {
      CloseBold,
      loading: false,
      overviewData: [
        { icon: '👥', title: '今日活跃用户', value: '2,458', trend: 12.3, bgColor: 'linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)' },
        { icon: '💬', title: '对话总数', value: '8,742', trend: 8.6, bgColor: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)' },
        { icon: '📂', title: '文件分析', value: '1,203', trend: -3.2, bgColor: 'linear-gradient(135deg, #f12711 0%, #f5af19 100%)' },
        { icon: '⚡', title: '响应速度', value: '128ms', trend: -15.7, bgColor: 'linear-gradient(135deg, #654ea3 0%, #eaafc8 100%)' }
      ]
    };
  },
  setup() {
    const currentTime = ref('');
    const usageTrendChart = ref(null);
    const preferenceChart = ref(null);
    const responseTimeChart = ref(null);
    const errorRateChart = ref(null);
    const wordCloudChart = ref(null);
    const heatMapChart = ref(null);

    // 更新时间显示
    const updateTime = () => {
      const now = new Date();
        currentTime.value = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      }).replace(/\//g, '-');
    };

    // 初始化时间更新
    setInterval(updateTime, 1000);
    updateTime();

    // 模拟动态数据
    const generateTrendData = () => {
      return Array.from({ length: 30 }, (_, i) => [
        `6/${i + 1}`,
        Math.floor(Math.random() * 100) + 50
      ]);
    };

    // 初始化使用趋势图
    const initUsageTrendChart = () => {
      const option = {
        title: { 
          text: '每日使用频率趋势', 
          left: 'center',
          textStyle: {
            color: 'rgba(0, 242, 254, 0.8)',
            fontSize: 18,
            fontWeight: 'bold',
            textShadow: '0 0 10px rgba(100, 200, 255, 0.8)'
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br/>使用次数: {c}',
          backgroundColor: 'rgba(10, 20, 40, 0.9)',
          borderColor: '#4facfe',
          borderWidth: 1,
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(100, 200, 255, 0.2)'
            }
          }
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: generateTrendData().map(item => item[0]),
          axisLine: {
            lineStyle: {
              color: 'rgba(100, 200, 255, 0.3)',
              width: 2
            }
          },
          axisLabel: {
            color: 'rgba(200, 220, 255, 0.8)',
            fontSize: 12,
            interval: 4
          },
          axisTick: {
            show: false
          }
        },
        yAxis: { 
          type: 'value', 
          name: '使用次数',
          nameTextStyle: {
            color: 'rgba(200, 220, 255, 0.8)',
            fontSize: 14,
            padding: [0, 0, 0, 40]
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(100, 200, 255, 0.3)',
              width: 2
            }
          },
          axisLabel: {
            color: 'rgba(200, 220, 255, 0.8)',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(100, 200, 255, 0.1)',
              type: 'dashed'
            }
          }
        },
        series: [{
          name: '使用频率',
          type: 'line',
          smooth: true,
          data: generateTrendData().map(item => item[1]),
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(74, 175, 244, 0.8)' },
              { offset: 1, color: 'rgba(74, 175, 244, 0.1)' }
            ])
          },
          lineStyle: { 
            width: 4,
            color: '#4aaff4',
            shadowColor: 'rgba(74, 175, 244, 0.5)',
            shadowBlur: 10,
            shadowOffsetY: 5
          },
          symbol: 'circle',
          symbolSize: 10,
          itemStyle: { 
            color: '#4aaff4',
            borderColor: '#fff',
            borderWidth: 2,
            shadowColor: 'rgba(74, 175, 244, 0.8)',
            shadowBlur: 8
          },
          emphasis: {
            lineStyle: {
              width: 5,
              color: '#fff'
            },
            itemStyle: {
              color: '#fff',
              shadowColor: 'rgba(255, 255, 255, 0.8)',
              shadowBlur: 12
            }
          },
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return idx * 50;
          }
        }],
        dataZoom: [{
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          start: 70,
          end: 100,
          backgroundColor: 'rgba(10, 20, 40, 0.8)',
          dataBackground: {
            lineStyle: {
              color: 'rgba(100, 200, 255, 0.3)',
              width: 1
            },
            areaStyle: {
              color: 'rgba(100, 200, 255, 0.1)'
            }
          },
          fillerColor: 'rgba(74, 175, 244, 0.2)',
          borderColor: 'rgba(100, 200, 255, 0.5)',
          textStyle: {
            color: 'rgba(200, 220, 255, 0.8)'
          },
          handleStyle: {
            color: '#4aaff4',
            borderColor: '#fff',
            borderWidth: 1,
            shadowColor: 'rgba(74, 175, 244, 0.5)',
            shadowBlur: 5
          },
          brushSelect: false,
          height: 15,
          bottom: '5%'
        }],
        backgroundColor: 'transparent'
      };
      const chart = echarts.init(usageTrendChart.value);
      chart.setOption(option);
      
      // 添加动画效果
      setInterval(() => {
        const newData = generateTrendData();
        chart.setOption({
          xAxis: {
            data: newData.map(item => item[0])
          },
          series: [{
            data: newData.map(item => item[1])
          }]
        });
      }, 3000);
    };

    // 初始化使用偏好图
    const initPreferenceChart = () => {
      const option = {
        title: { 
          text: '功能使用偏好', 
          left: 'center',
          textStyle: {
            color: 'rgba(0, 242, 254, 0.8)',
            fontSize: 18,
            fontWeight: 'bold',
            textShadow: '0 0 10px rgba(100, 200, 255, 0.8)'
          }
        },
        tooltip: { 
          trigger: 'item',
          backgroundColor: 'rgba(10, 20, 40, 0.9)',
          borderColor: '#4facfe',
          borderWidth: 1,
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: { 
          orient: 'vertical', 
          right: 10, 
          top: 'center',
          textStyle: {
            color: 'rgba(200, 220, 255, 0.8)',
            fontSize: 12
          },
          itemGap: 20,
          itemWidth: 12,
          itemHeight: 12
        },
        series: [
          {
            name: '使用偏好',
            type: 'pie',
            radius: ['45%', '75%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: 'rgba(10, 20, 40, 1)',
              borderWidth: 2,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 5,
              shadowOffsetX: 0,
              shadowOffsetY: 2
            },
            label: { 
              show: true,
              color: '#fff',
              formatter: '{b}: {d}%',
              fontSize: 12,
              fontWeight: 'bold'
            },
            emphasis: {
              label: { 
                show: true, 
                fontSize: '14', 
                fontWeight: 'bold',
                color: '#fff'
              },
              itemStyle: {
                shadowColor: 'rgba(255, 255, 255, 0.8)',
                shadowBlur: 10
              }
            },
            labelLine: { 
              show: true,
              length: 10,
              length2: 15,
              lineStyle: {
                color: 'rgba(200, 220, 255, 0.3)'
              }
            },
            data: [
              { value: 1048, name: '大模型智能对话', itemStyle: { color: '#6a11cb' } },
              { value: 735, name: '可视化知识图谱', itemStyle: { color: '#2575fc' } },
              { value: 580, name: '文件对话', itemStyle: { color: '#11998e' } },
              { value: 484, name: '联网搜索', itemStyle: { color: '#38ef7d' } },
              { value: 300, name: 'RAG检索', itemStyle: { color: '#f5af19' } },
              { value: 250, name: '知识图谱检索', itemStyle: { color: '#ea1bc1' } }
            ],
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return idx * 100;
            }
          }
        ],
        backgroundColor: 'transparent'
      };
      echarts.init(preferenceChart.value).setOption(option);
    };

    // 初始化词云图
    const initWordCloudChart = () => {
    const option = {
      title: {
        text: '用户关注热点词云',
        left: 'center',
        textStyle: {
          color: 'rgba(0, 242, 254, 0.8)',
          fontSize: 18,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        show: true,
        formatter: '{b}: {c}次',
        backgroundColor: 'rgba(10, 20, 40, 0.9)',
        borderColor: '#4facfe'
      },
      series: [{
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '90%',
        height: '90%',
        sizeRange: [12, 60],
        rotationRange: [-45, 45],
        rotationStep: 15,
        gridSize: 8,
        drawOutOfBound: false,
        emphasis: {
          textStyle: {
            shadowBlur: 10,
            shadowColor: '#fff'
          }
        },
        data: [
          { name: '科研数据', value: 85, itemStyle: { color: '#4facfe' } },
          { name: '论文查重', value: 78, itemStyle: { color: '#00f2fe' } },
          { name: '实验设备', value: 65, itemStyle: { color: '#a6c1ee' } },
          { name: '奖学金', value: 58, itemStyle: { color: '#4facfe' } },
          { name: '课程安排', value: 52, itemStyle: { color: '#00f2fe' } },
          { name: '导师选择', value: 48, itemStyle: { color: '#a6c1ee' } },
          { name: '就业前景', value: 45, itemStyle: { color: '#4facfe' } },
          { name: '学术会议', value: 38, itemStyle: { color: '#00f2fe' } },
          { name: '图书馆资源', value: 35, itemStyle: { color: '#a6c1ee' } }
        ]
      }],
      backgroundColor: 'transparent'
    };
    
    const chart = echarts.init(wordCloudChart.value);
    chart.setOption(option);
    
    // 添加窗口resize监听
    window.addEventListener('resize', function() {
      chart.resize();
    });
};

  // 初始化热力图
  const initHeatMapChart = () => {
    const hours = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
    const types = [
      '学术咨询', '生活服务', 
      '技术支持', '就业指导', 
      '心理辅导'
    ];
    const data = [
      [0, 0, 35], [0, 1, 42], [0, 2, 28], [0, 3, 15], [0, 4, 8],
      [1, 0, 45], [1, 1, 50], [1, 2, 38], [1, 3, 22], [1, 4, 12],
      [2, 0, 55], [2, 1, 62], [2, 2, 48], [2, 3, 30], [2, 4, 18],
      [3, 0, 50], [3, 1, 58], [3, 2, 42], [3, 3, 25], [3, 4, 15],
      [4, 0, 40], [4, 1, 45], [4, 2, 35], [4, 3, 20], [4, 4, 10],
      [5, 0, 25], [5, 1, 30], [5, 2, 22], [5, 3, 12], [5, 4, 5],
      [6, 0, 20], [6, 1, 25], [6, 2, 18], [6, 3, 8], [6, 4, 2]
    ];

    const option = {
      title: {
        text: '咨询问题类型热力图',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: 18,
          fontWeight: 'bold',
          textShadow: '0 0 10px rgba(100, 200, 255, 0.8)'
        }
      },
      tooltip: {
        position: 'top',
        formatter: function (params) {
          return `${hours[params.value[0]]}的${types[params.value[1]]}<br>咨询量: ${params.value[2]}`;
        },
        backgroundColor: 'rgba(10, 20, 40, 0.9)',
        borderColor: '#4facfe',
        textStyle: { color: '#fff' }
      },
      grid: {
        top: '15%',
        left: '10%',
        right: '5%',
        bottom: '15%'
      },
      xAxis: {
        type: 'category',
        data: hours,
        splitArea: { show: true },
        axisLabel: {
          color: 'rgba(200, 220, 255, 0.8)',
          rotate: 0
        },
        axisLine: {
          lineStyle: { color: 'rgba(100, 200, 255, 0.3)' }
        }
      },
      yAxis: {
        type: 'category',
        data: types,
        splitArea: { show: true },
        axisLabel: {
          color: 'rgba(200, 220, 255, 0.8)'
        },
        axisLine: {
          lineStyle: { color: 'rgba(100, 200, 255, 0.3)' }
        }
      },
      visualMap: {
        min: 0,
        max: 70,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '5%',
        inRange: {
          color: [
            '#1a1a4a', '#2a2a7a', 
            '#3a4de9', '#4facfe', 
            '#00f2fe'
          ]
        },
        textStyle: { color: '#fff' }
      },
      series: [{
        name: '咨询量',
        type: 'heatmap',
        data: data,
        label: { show: false },
        emphasis: {
          itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' }
        },
        progressive: 1000,
        animation: false
      }],
      backgroundColor: 'transparent'
    };
    echarts.init(heatMapChart.value).setOption(option);
  };

    // 初始化响应时间图
    const initResponseTimeChart = () => {
      const option = {
        title: { 
          text: 'API响应时间(ms)', 
          left: 'center',
          textStyle: {
            color: 'rgba(0, 242, 254, 0.8)',
            fontSize: 18,
            fontWeight: 'bold',
            textShadow: '0 0 10px rgba(100, 200, 255, 0.8)'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { 
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(100, 200, 255, 0.2)'
            }
          },
          backgroundColor: 'rgba(10, 20, 40, 0.9)',
          borderColor: '#4facfe',
          borderWidth: 1,
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['智能对话', '知识图谱检索', '知识图谱可视化', 'RAG检索'],
          axisLabel: { 
            interval: 0, 
            rotate: 30,
            color: 'rgba(200, 220, 255, 0.8)',
            fontSize: 12
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(100, 200, 255, 0.3)',
              width: 2
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: { 
          type: 'value', 
          name: '响应时间',
          nameTextStyle: {
            color: 'rgba(200, 220, 255, 0.8)',
            fontSize: 14,
            padding: [0, 0, 0, 40]
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(100, 200, 255, 0.3)',
              width: 2
            }
          },
          axisLabel: {
            color: 'rgba(200, 220, 255, 0.8)',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(100, 200, 255, 0.1)',
              type: 'dashed'
            }
          }
        },
        series: [{
          data: [120, 200, 260, 80],
          type: 'bar',
          showBackground: true,
          backgroundStyle: { 
            color: 'rgba(100, 200, 255, 0.1)',
            borderRadius: [4, 4, 0, 0]
          },
          itemStyle: {
            color: function(params) {
              const colorList = ['#6a11cb', '#2575fc', '#11998e', '#38ef7d'];
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: colorList[params.dataIndex] },
                { offset: 1, color: echarts.color.lift(colorList[params.dataIndex], 0.3) }
              ]);
            },
            borderRadius: [4, 4, 0, 0],
            shadowColor: 'rgba(100, 200, 255, 0.5)',
            shadowBlur: 8,
            shadowOffsetY: 3
          },
          emphasis: {
            itemStyle: {
              shadowColor: 'rgba(255, 255, 255, 0.8)',
              shadowBlur: 12
            }
          },
          barWidth: '40%',
          animationDelay: function (idx) {
            return idx * 100;
          }
        }],
        backgroundColor: 'transparent'
      };
      echarts.init(responseTimeChart.value).setOption(option);
    };

    // 初始化错误率图
    const initErrorRateChart = () => {
      const option = {
        title: { 
          text: '错误率统计(%)', 
          left: 'center',
          textStyle: {
            color: 'rgba(0, 242, 254, 0.8)',
            fontSize: 18,
            fontWeight: 'bold',
            textShadow: '0 0 10px rgba(100, 200, 255, 0.8)'
          }
        },
        tooltip: { 
          trigger: 'axis',
          backgroundColor: 'rgba(10, 20, 40, 0.9)',
          borderColor: '#4facfe',
          borderWidth: 1,
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        radar: {
          indicator: [
            { name: '智能对话', max: 5 },
            { name: '知识图谱检索', max: 5 },
            { name: '联网搜索', max: 5 },
            { name: '文件对话', max: 5 },
            { name: 'RAG检索', max: 5 }
          ],
          radius: '65%',
          center: ['50%', '55%'],
          axisName: {
            color: 'rgba(200, 220, 255, 0.8)',
            fontSize: 12
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(100, 200, 255, 0.3)',
              width: 1
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(100, 200, 255, 0.2)',
              width: 1
            }
          },
          splitArea: {
            show: false
          }
        },
        series: [{
          type: 'radar',
          data: [
            {
              value: [2.3, 1.8, 3.2, 0.5, 1.0],
              name: '错误率',
              areaStyle: { 
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [
                  { offset: 0, color: 'rgba(245, 175, 25, 0.8)' },
                  { offset: 1, color: 'rgba(245, 175, 25, 0.1)' }
                ])
              },
              lineStyle: {
                width: 2,
                color: '#f5af19'
              },
              itemStyle: {
                color: '#f5af19',
                shadowColor: 'rgba(245, 175, 25, 0.5)',
                shadowBlur: 8
              },
              symbol: 'circle',
              symbolSize: 8
            }
          ],
          animationDelay: function (idx) {
            return idx * 100;
          }
        }],
        backgroundColor: 'transparent'
      };
      echarts.init(errorRateChart.value).setOption(option);
    };

    onMounted(() => {
      initUsageTrendChart();
      initPreferenceChart();
      initResponseTimeChart();
      initErrorRateChart();
      initWordCloudChart();  
      initHeatMapChart();    

      // 窗口大小变化时重绘图表
      window.addEventListener('resize', function() {
        [usageTrendChart, preferenceChart,wordCloudChart,heatMapChart, responseTimeChart, errorRateChart].forEach(chart => {
          if (chart.value) {
            echarts.getInstanceByDom(chart.value)?.resize();
          }
        });
      });
    });

    return {
      currentTime,
      usageTrendChart,
      preferenceChart,
      responseTimeChart,
      errorRateChart,
      wordCloudChart,
      heatMapChart
    };
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.tools-container {
  position: relative;
  padding: 20px;
  background: linear-gradient(135deg, #0a1a35 0%, #1a1a4a 100%);
  min-height: 100vh;
  color: rgba(255,255,255,0.85);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}



/* 词云特殊样式 */
.word-cloud-container {
  background: rgba(10, 20, 40, 0.3);
  border: 1px solid rgba(74, 175, 244, 0.2);
}

/* 热力图特殊样式 */
.heat-map-container {
  background: rgba(10, 20, 40, 0.3);
  border: 1px solid rgba(74, 175, 244, 0.2);
}

/* 背景装饰元素 */
.decorate-circle-1 {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 175, 244, 0.1) 0%, rgba(74, 175, 244, 0) 70%);
  z-index: 0;
}

.decorate-circle-2 {
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 17, 203, 0.1) 0%, rgba(106, 17, 203, 0) 70%);
  z-index: 0;
}

.decorate-line-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(100, 200, 255, 0.03) 50%, rgba(255,255,255,0) 100%);
  z-index: 0;
  pointer-events: none;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  position: relative;
  z-index: 1;
}

.dashboard-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 242, 254, 0) 0%, rgba(0, 242, 254, 0.5) 50%, rgba(0, 242, 254, 0) 100%);
}

.dashboard-title {
  font-size: 26px;
  font-weight: bold;
  background: linear-gradient(90deg, #00f2fe, #4facfe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
}

.title-icon {
  display: inline-block;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.time-display {
  font-size: 16px;
  color: #00f2fe;
  background: rgba(0, 242, 254, 0.1);
  padding: 8px 20px;
  border-radius: 20px;
  border: 1px solid rgba(0, 242, 254, 0.3);
  font-family: 'Arial', sans-serif;
  position: relative;
  overflow: hidden;
}

.time-display::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(0, 242, 254, 0) 0%,
    rgba(0, 242, 254, 0.1) 50%,
    rgba(0, 242, 254, 0) 100%
  );
  transform: rotate(30deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%) rotate(30deg); }
  100% { transform: translateX(100%) rotate(30deg); }
}

/* 数据概览卡片 */
.data-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.data-card {
  background: rgba(20, 36, 69, 0.5);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(100, 200, 255, 0.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  border-color: rgba(100, 200, 255, 0.3);
}

.data-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #00f2fe, #4facfe);
}

.data-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
  color: white;
  flex-shrink: 0;
}

.data-card-content {
  flex: 1;
}

.data-card-title {
  font-size: 14px;
  color: rgba(200, 220, 255, 0.8);
  margin-bottom: 5px;
}

.data-card-value {
  font-size: 22px;
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
}

.data-card-trend {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}

.data-card-trend.up {
  background: rgba(56, 239, 125, 0.2);
  color: #38ef7d;
}

.data-card-trend.down {
  background: rgba(241, 39, 17, 0.2);
  color: #f12711;
}

.data-card-decoration {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(100, 200, 255, 0.05);
  z-index: -1;
}

/* 分区卡片 */
.section-card {
  background: rgba(20, 36, 69, 0.5);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(100, 200, 255, 0.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.section-card:hover {
  border-color: rgba(100, 200, 255, 0.3);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.section-title {
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-decoration {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 242, 254, 0) 0%, rgba(0, 242, 254, 0.8) 50%, rgba(0, 242, 254, 0) 100%);
}

.chart-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 20px;
}

.chart-item {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.chart-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(10, 20, 40, 0.6) 0%, rgba(15, 30, 60, 0.8) 100%);
  border: 1px solid rgba(100, 200, 255, 0.1);
  border-radius: 8px;
  box-shadow: inset 0 0 15px rgba(100, 200, 255, 0.1);
  z-index: -1;
}

.chart-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.chart-item:hover::before {
  border-color: rgba(100, 200, 255, 0.3);
}

:deep(.el-page-header) {
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

:deep(.el-page-header__content),
:deep(.el-page-header__back) {
  color: white;
}

@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .data-overview {
    grid-template-columns: 1fr;
  }
  
  .chart-container {
    grid-template-columns: 1fr;
  }
  
  .chart-item {
    height: 300px;
  }
  
  .dashboard-title {
    font-size: 22px;
  }
  
  .time-display {
    margin-top: 10px;
  }
}
</style>